<template>
    <el-table :data="tableData" style="width: 85%;z-index: 0;">
        <el-table-column label="id" prop="id"  />
        <el-table-column label="userName" prop="userName" />
        <el-table-column label="fullName" prop="fullName" />
        <el-table-column label="password" prop="password" />
        <el-table-column label="role" prop="role" />

        <el-table-column align="right">
          <template #header>
              <el-button type="primary" style="width: 50px;height: 20px;">添加</el-button>
          </template>
          <template #default="scope">
              <Revise/>
              <el-button texttype="danger" @click="handleDelete(scope.$index, scope.row)" style="width: 55px;height: 23px;background-color: #f56c6c;color: #ffffff;">Delete</el-button>
          </template>
        </el-table-column>
    </el-table>
    

    
</template>
  
<script setup lang="js" >
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import axios from 'axios';
import Revise from '../components/Revise.vue';




const handleEdit = (index, row) => {
    console.log(index, row)
}
const handleDelete = (index, row) => {
    ElMessageBox.confirm(
    '是否删除这条数据？删除后无法恢复！',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消删除',
      type: 'warning',
    }
  )
    .then(() => {
        axios.post(`http://localhost:8080/DeleteUser/${row.id}`).then(res=>{
            console.log(res.data);
            location.reload()
        }).catch(error=>{
            console.log(error);
        })
        
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const tableData= ref([])
onMounted(() => {
    axios.get(`http://localhost:8080/getUsers`).then(res=>{
        console.log(res.data);
        tableData.value=res.data
        console.log(tableData.value);
        
    }).catch(error=>{
        console.log(error);
    })
})

</script>
<style>
/* .cell{
  height: 25px;
}
:deep(.el-table.el-table__cell) {
  z-index: 0;
} */
</style>
  